<template>
    <view :style="themeColor">
        <view class="page" >
    <view class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex myInfo_flex_0"    :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
            <view   class='flex flex-wrap align-stretch justify-between myInfo_fd0_0'      >
            <view   class='flex flex-wrap align-center myInfo_fd0_0_c0'   @tap.stop="handleJumpDiy" data-type="back" data-url="1"   >
        <image class='myInfo_fd0_0_c0_c0'  mode="aspectFit"  :src='STATIC_URL+"286.png"'></image>
</view>
    <view   class='flex flex-wrap align-center'      >
        <text class='myInfo_fd0_0_c1_c0'  >我的资料</text>
</view>
    <view   class='flex align-center justify-end myInfo_fd0_0_c2'      >
        </view>
</view>

        </view>
<view :style="{height: (88+StatusBarRpx)+'rpx'}"  ></view>
<!---我的资料flex布局开始-->
 <view class="flex flex-direction flex-wrap align-stretch"    >
            <view   class='flex flex-direction align-stretch myInfo_fd1_0'      >
            <view   class='flex flex-wrap align-center myInfo_fd1_0_c0'      >
        <text class='myInfo_fd1_0_c0_c0'  >头像</text>
<view class="upload position-relative myInfo_fd1_0_c0_c1">
    
     <image class=" myInfo_fd1_0_c0_c1_image" mode="aspectFit"  @tap="croppingUploadImage('avatar','avatar',dataDetails,dataDetails)" :src="dataDetails.avatar ? dataDetails.avatar : STATIC_URL+'219.png'"></image>
</view>
<image class='myInfo_fd1_0_c0_c2'  mode="aspectFit"  :src='STATIC_URL+"460.png"'></image>
</view>
    <view   class='flex flex-wrap align-center justify-between myInfo_fd1_0_c1'      >
        <text class='myInfo_fd1_0_c0_c0'  >昵称</text>
<input class='flex-sub myInfo_fd1_0_c1_c1'   type="text" :placeholder="`请输入昵称`" confirm-type="done" :maxlength="7" placeholder-style="color:#666666;font-size:32rpx"  v-model="dataDetails.nickname" />
<image class='myInfo_fd1_0_c0_c2'  mode="aspectFit"  :src='STATIC_URL+"460.png"'></image>
</view>
    <view   class='flex flex-wrap align-center justify-between myInfo_fd1_0_c1'   @tap.stop="pickerDiy1656985489961=true"   >
        <text class='myInfo_fd1_0_c0_c0'  >性别</text>
<input class='flex-sub myInfo_fd1_0_c2_c1'   type="text" :placeholder="`请选择性别`" confirm-type="done" :maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"   v-model="sex"  />
<image class='myInfo_fd1_0_c0_c2'  mode="aspectFit"  :src='STATIC_URL+"460.png"'></image>
</view>
    <view   class='flex flex-wrap align-center justify-between flex-sub myInfo_fd1_0_c3'   @tap.stop="pickerDiy1656986153485=true"   >
        <text class='myInfo_fd1_0_c0_c0'  >生日</text>
<input class='flex-sub myInfo_fd1_0_c2_c1'   type="text" :placeholder="`请选择生日`" confirm-type="done" :maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:32rpx"  v-model="dataDetails.birthday" />
<image class='myInfo_fd1_0_c0_c2'  mode="aspectFit"  :src='STATIC_URL+"460.png"'></image>
</view>
</view>
    <view   class='flex flex-wrap align-center justify-center myInfo_fd1_1'      >
        <button class='myInfo_fd1_1_c0'  @tap.stop="editUserFunc()"  >保存</button>
</view>
</view>
        
<!---我的资料flex布局结束-->
<!--选择生日开始 -->
        <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1656986153485" :value.sync='dataDetails.birthday'  mode='date' :picker-height='88' :current='true' :mask-show='true' fields='day' :timeout='true' start-year='1990-01-01' end-year='现在'  >
            <template #picker-header>
        <view   class='flex flex-wrap align-center justify-between myInfo_picker2_0'      >
        <text class='myInfo_picker2_0_c0'  @tap="$refs.benbenWritePickerCodepicker2.cancel()" >取消</text>
<text class='myInfo_picker2_0_c1'  >选择日期</text>
<text class='myInfo_picker2_0_c2'  @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()" >确定</text>
</view>
</template>
        </benben-picker>
<!--选择生日结束 -->
<!--选择性别开始 -->
        <benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1656985489961" :label.sync='sex' :value.sync='dataDetails.gender' :options='sexType'  mode='selector' :mask-show='true' :timeout='true' :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'  >
            <template #picker-header>
        <view   class='flex flex-wrap align-center justify-between myInfo_picker3_0'      >
        <text class='myInfo_picker3_0_c0'  @tap="$refs.benbenWritePickerCodepicker3.cancel()" >取消</text>
<text class='myInfo_picker3_0_c1'  >选择性别</text>
<text class='myInfo_picker3_0_c2'  @tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()" >确定</text>
</view>
</template>
        </benben-picker>
<!--选择性别结束 -->
    
    
        </view>
    </view>
</template>
<script>
    import UploadImage from '@/common/utils/upload-image.js'
import {validate} from '@/common/utils/validate.js'
    export default {
        components:{},
        
        
        data(){
			return {"pickerDiy1656985489961":false,"pickerDiy1656986153485":false,"sexType":[{"name":"保密","value":"0","image":""},{"name":"男","value":"1","image":""},{"name":"女","value":"2","image":""}],"editUser":{},"dataDetails":{"invite_code":"","address":"","address_code":"","hobby":"","tags":"","id":"","userlevel_id":"","mobile":"","real_name":"","avatar":"","account":"","email":"","birthday":"","gender":"","create_time":"","user_money":"","freeze_money":"","total_consumption_money":"","score":"","_mobile":"","coupon":"","collection_count":"","browse_count":"","total_money":"","certified":"","nickname":"","is_pay_password":"","follow_count":""},"dataMessage":{"userinfo":{"id":"","avatar":"","real_name":"","nickname":"","email":"","gender":"","mobile":"","birthday":"","client_id":"","phone":""}},"sex":"","isCheck":false};
		},
		computed:{
            themeColor() {
              return this.$store.getters.themeColor
            },
                          userInfo: {
      get() {
        return this.$store.state.userInfo
      },
      set() {
        this.$store.commit('updateUserInfo', value)
      },
    }
		},
		watch:{},
		onLoad(options){
            this.getUserinfoFunc()
this.diyPageListen()
		},
        onUnload() {
            this.diyOffPageListen()    
        },
		onReady(){
            
		},
		onShow(){
            
		},
		onHide(){
            
		},
		onResize(){
            
		},
		onPullDownRefresh(){
            
		},
		onReachBottom(e){
            
		},
		onPageScroll(e){
            
		},
		methods:{
                    //裁剪图片上传
    croppingUploadImage(id, path, obj, obj1, fnName = false) {
      let self = this
      if (!obj) obj = this
      if (!obj1) obj1 = this
      let itemList = obj1[path] ? ['修改头像', '拍照', '从手机相册选择'] : ['拍照', '从手机相册选择']
      function imageCroppingCuccess() {
        uni.$once('image-cropping-success', (file) => {
          if (!file) return
          new UploadImage([file], {
            complete: (res) => {
              if (id) self.$set(obj, id, res[0].id)
              if (path) self.$set(obj1, path, res[0].path)
              if (fnName) self[fnName]()
            },
          })
        })
      }
      uni.showActionSheet({
        itemList: itemList,
        success: function (res) {
          if (res.tapIndex == 0 && obj1[path]) {
            uni.navigateTo({
              url: '/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&&myImgUrl=' + obj1[path],
              animationDuration: 0,
            })
            imageCroppingCuccess()
          }
          if ((res.tapIndex == 1 && obj1[path]) || (res.tapIndex == 0 && !obj1[path])) {
            uni.chooseImage({
              count: 1,
              sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
              success: (res) => {
                // 跳转到图片裁切页面
                uni.navigateTo({
                  url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                  animationDuration: 0,
                })
                imageCroppingCuccess()
              },
            })
          }
          if ((res.tapIndex == 2 && obj1[path]) || (res.tapIndex == 1 && !obj1[path])) {
            uni.chooseImage({
              count: 1,
              sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
              success: (res) => {
                // 跳转到图片裁切页面
                uni.navigateTo({
                  url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                  animationDuration: 0,
                })
                imageCroppingCuccess()
              },
            })
          }
        },
        fail: function (res) {
          console.log(res.errMsg)
        },
      })
    },
                //修改个人信息
                async editUserFunc(){
                        if( this.isCheck===true){
                        return
    }
    else{
                    if(!validate(this.dataDetails.nickname,'length','1,7')){
                 this.$message.info('昵称最多7个字符');
                 return false;
            }
   this.isCheck = true;
    //请求方法
    //数据验证
    
  let datadataMessage = await this.$api.post(global.apiUrls.post5cb54af125f1c, {
    avatar:this.dataDetails.avatar,nickname:this.dataDetails.nickname,gender:this.dataDetails.gender,birthday:this.dataDetails.birthday
  });
  
  if (datadataMessage.data.code != 1) {
    this.$message.info(datadataMessage.data.msg);
    return
  } 
  let infodataMessage = datadataMessage.data;
  this.dataMessage = infodataMessage.data
  
                this.$store.commit('updateUserInfo', this.dataMessage.userinfo)
                setTimeout(()=>{
           this.isCheck = false;
      },500)
                    this.$message.info('保存成功');
                setTimeout(()=>{
                    this.$urouter.navigateBack(1);
      },800)
    }
                },
                //获取个人信息
                async getUserinfoFunc(data){
                        let datadataDetails = await this.$api.get(global.apiUrls.post5c78c4772da97, {

				});

				if (datadataDetails.data.code != 1) {
					this.$message.info(datadataDetails.data.msg);
					return
				}
				let infodataDetails = datadataDetails.data;
				if(data){
					this.dataDetails.nickname=infodataDetails.data.nickname
				}else {
					this.dataDetails = infodataDetails.data
					if (this.dataDetails.gender == '1') {
						this.sex = '男';
					} else if (this.dataDetails.gender == '2') {
						this.sex = '女';
					} else {
						this.sex = '保密';
					}
				}
                },
    //页面监听
    diyPageListen() {
                  uni.$on('chengeName',(data) => {
                                   this.getUserinfoFunc(data)
          });
    }                     ,
    //注销页面监听
    diyOffPageListen() {
                     uni.$off('chengeName');
    }                     
		}
    };
</script> 
<style lang="scss" scoped>
           .page{
            width: 100vw;
            overflow-x: hidden;
            min-height: calc(100vh - var(--window-bottom));
            background:rgba(248, 248, 248, 1);background-size: 100% auto;
        }
    .myInfo_flex_0{
        background:#fff;width:750rpx;height:88rpx;overflow:hidden;z-index:10;top:0rpx;background-size:100% auto !important;
    }
    .myInfo_fd0_0_c2{
        padding:0rpx 0rpx 0rpx 0rpx;width:100rpx;
    }
    .myInfo_fd0_0_c1_c0{
        font-size:36rpx;font-weight:500;color:#333333;line-height:50rpx;
    }
    .myInfo_fd0_0_c0_c0{
        width:18rpx;height:32rpx;border-radius:0rpx 0rpx 0rpx 0rpx;
    }
    .myInfo_fd0_0_c0{
        width:100rpx;
    }
    .myInfo_fd0_0{
        padding:0rpx 32rpx 0rpx 32rpx;line-height:88rpx;
    }
    .myInfo_fd1_1_c0{
        background:var(--benbenbgColor7);border-radius:44rpx 44rpx 44rpx 44rpx;font-size:32rpx;color:#fff;width:686rpx;height:88rpx;line-height:88rpx;
    }
    .myInfo_fd1_1{
        position:fixed;left:0rpx;bottom:calc(40rpx + var(--window-bottom));width:750rpx;
    }
    .myInfo_fd1_0_c3{
        padding:32rpx 0rpx 32rpx 0rpx;
    }
    .myInfo_fd1_0_c2_c1{
        font-size:32rpx;font-weight:400;line-height:32rpx;text-align:right;color:rgba(102, 102, 102, 1);
    }
    .myInfo_fd1_0_c1_c1{
        text-align:right;font-size:32rpx;font-weight:400;color:rgba(51, 51, 51, 1);margin:0rpx 0rpx 0rpx 32rpx;
    }
    .myInfo_fd1_0_c1{
        border-bottom:1px solid #eee;padding:32rpx 0rpx 32rpx 0rpx;
    }
    .myInfo_fd1_0_c0_c2{
        width:20rpx;height:28rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 0rpx 0rpx 12rpx;
    }
    .myInfo_fd1_0_c0_c1_image{
        width:100rpx;height:100rpx;border-radius:50rpx 50rpx 50rpx 50rpx;
    }
    .myInfo_fd1_0_c0_c1{
        width:100rpx;height:100rpx;border-radius:50rpx 50rpx 50rpx 50rpx;margin:0rpx 0rpx 0rpx auto;
    }
    .myInfo_fd1_0_c0_c0{
        font-size:32rpx;font-weight:400;color:rgba(51, 51, 51, 1);
    }
    .myInfo_fd1_0_c0{
        border-bottom:1px solid #eee;line-height:148rpx;
    }
    .myInfo_fd1_0{
        background:var(--benbenbgColor1);padding:0rpx 32rpx 0rpx 32rpx;background-size:100% auto !important;margin:0rpx 0rpx 150rpx 0rpx;
    }
    .myInfo_picker2_0_c2{
        color:var(--benbenFontColor5);line-height:40rpx;font-size:32rpx;font-weight:500;
    }
    .myInfo_picker2_0_c1{
        font-size:32rpx;font-weight:400;color:#333333;
    }
    .myInfo_picker2_0_c0{
        line-height:40rpx;font-size:32rpx;font-weight:500;color:#BFBFBF;
    }
    .myInfo_picker2_0{
        border-bottom:1px solid #eee;background:#fff;padding:0rpx 32rpx 0rpx 32rpx;line-height:88rpx;border-radius:25rpx 25rpx 0rpx 0rpx;background-size:100% auto !important;
    }
    .myInfo_picker3_0_c2{
        color:var(--benbenFontColor5);line-height:40rpx;font-size:32rpx;font-weight:500;
    }
    .myInfo_picker3_0_c1{
        font-size:32rpx;font-weight:400;color:#333333;
    }
    .myInfo_picker3_0_c0{
        line-height:40rpx;font-size:32rpx;font-weight:500;color:#BFBFBF;
    }
    .myInfo_picker3_0{
        border-bottom:1px solid #eee;background:#fff;padding:0rpx 32rpx 0rpx 32rpx;line-height:88rpx;border-radius:25rpx 25rpx 0rpx 0rpx;background-size:100% auto !important;
    }
</style>